<template>
  <view class="container">
    <uni-forms ref="form" :model="formData" :rules="rules" label-width="100px">
      <!-- 员工信息 -->
      <uni-forms-item label="员工姓名" required>
        <uni-easyinput
            :value="formData.name"
            placeholder="自动获取"
            disabled
            :styles="{ disabledColor: '#333' }"
        />
      </uni-forms-item>

      <!-- 自动填充当天日期 -->
      <uni-forms-item label="上报日期" required>
        <uni-datetime-picker
            v-model="formData.reportDate"
            type="date"
            :disabled="true"
            :clear-icon="false"
        />
      </uni-forms-item>

      <!-- 金额输入 -->
      <uni-forms-item label="现金金额" name="reportedAmount" required>
        <uni-easyinput
            v-model="formData.reportedAmount"
            placeholder="请输入金额"
            type="digit"
            @input="handleAmountInput"
        >
          <template #suffix>
            <text class="currency-suffix">元</text>
          </template>
        </uni-easyinput>
      </uni-forms-item>

      <!-- 备注信息 -->
      <uni-forms-item label="备注说明">
        <uni-easyinput
            v-model="formData.reportNotes"
            type="textarea"
            autoHeight
            placeholder="可选填特殊情况说明"
            :maxlength="200"
            show-count
        />
      </uni-forms-item>

      <button
          class="submit-btn"
          type="primary"
          :disabled="submitting"
          @click="handleSubmit"
      >
        {{ submitting ? '提交中...' : '立即提交' }}
      </button>
    </uni-forms>
  </view>
</template>

<script>
export default {
  data() {
    return {
      submitting: false,
      formData: {  // 模拟登录用户数据
        employeeId: this.$store.state.user.id,
        name: this.$store.state.user.name,
        deptName: this.$store.state.user.deptName,
        reportDate: this.getLocalDate(),  // 默认当天
        reportedAmount: null,
        reportNotes: ''
      },
      rules: {
        reportedAmount: {
          rules: [
            {required: true, errorMessage: '请输入金额'},
            {
              validateFunction: (rule, value, callback) => {
                if (value <= 0) {
                  callback('金额必须大于0')
                }
                return true
              }
            }
          ]
        }
      }
    }
  },
  methods: {
    // 获取本地日期（兼容iOS/Android）
    getLocalDate() {
      const date = new Date()
      const year = date.getFullYear()
      const month = (date.getMonth() + 1).toString().padStart(2, '0')
      const day = date.getDate().toString().padStart(2, '0')
      return `${year}-${month}-${day}`
    },

    // 金额输入处理
    handleAmountInput(value) {
      // 保留两位小数
      this.formData.reportedAmount =
          parseFloat(value.replace(/[^\d.]/g, '')).toFixed(2)
    },

    // 提交表单
    async handleSubmit() {
      try {
        this.submitting = true
        // const valid = await this.$refs.form.validate()

        // if (valid) {
        //   const payload = {
        //     ...this.formData,
        //     employeeId: this.currentUser.id,
        //     reportedAmount: Number(this.formData.reportedAmount)
        //   }

        // 调用提交接口（示例）
        this.req({
          url: '/cash/reports/add',
          method: 'POST',
          data: this.formData
        }).then(res => {
          console.log(res)
        })


        uni.showToast({
          title: '提交成功',
          icon: 'success',
          duration: 2000
        })

        // 2秒后返回
        setTimeout(() => {
          uni.navigateBack({delta: 1})
        }, 2000)
        // }
      } catch (error) {
        uni.showToast({
          title: error.message || '提交失败',
          icon: 'none'
        })
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped>
.container {
  padding: 30rpx;
}

/* 金额后缀样式 */
.currency-suffix {
  color: #666;
  font-size: 28rpx;
  margin-right: 10rpx;
}

/* 提交按钮 */
.submit-btn {
  margin-top: 60rpx;
  height: 90rpx;
  line-height: 90rpx;
  font-size: 34rpx;
  border-radius: 45rpx;
}

/* 禁用状态样式 */
.submit-btn[disabled] {
  background-color: #f0ad4e !important;
  opacity: 0.7;
}

/* 调整输入框圆角 */
/deep/ .uni-easyinput__content {
  border-radius: 12rpx !important;
}
</style>